/// <reference path="../../../../../node_modules/@types/jquery/index.d.ts" />
/// <reference path="../../../../../node_modules/@types/bootstrap/index.d.ts" />
import {Component, ElementRef, Input, OnInit} from '@angular/core';
import {timer} from 'rxjs';

@Component({
  selector: 'ng-tools-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss']
})
export class LoadingComponent implements OnInit {

  @Input() loading: {
    id: string,
    message: string,
    textColor?: string
  };

  dom: JQuery<HTMLElement>;

  constructor(private elem: ElementRef) {
  }

  ngOnInit() {
    timer(0).subscribe(() => {
      this.dom = $(this.elem.nativeElement).find(`#${this.loading.id}`).first();
    });
  }

  show(message, textColor: string = null, timing: number = 0) {
    this.loading.message = message;
    this.loading.textColor = textColor;
    timer(timing).subscribe(() => {
      this.dom.modal('show');
    });
  }

  hide(timing: number = 500) {
    timer(timing).subscribe(() => {
      this.loading.message = null;
      this.loading.textColor = null;
      this.dom.modal('hide');
    });
  }

  setOptions(message, textColor) {
    this.loading.message = message;
    this.loading.textColor = textColor;
  }

}
